<template>
    <div class="cooperative-enterprise-age">
        <echarts :data="optionData" height="300px"></echarts>
    </div>
</template>

<script>
import Echarts from "@components/my-components/echarts.vue";

export default {
    mixins: [],
    components: {
        Echarts,
    },
    props: {
        type:{
            type:String,
            default:'',
        },
        options: {
            type: Array,
            default: () => [],
        },
        ytitleLeft:{
            type:String,
            default:'企业数量', 
        },
        ytitleRight:{
            type:String,
            default:'企业年限', 
        }
    },
    data () {
        return {

        };
    },
    computed: {
        xdata:function(){
            return this.options.map((item,index,arr)=>{
                if(this.type == 'marketArea'){
                    return item.area
                }else{
                    return item.city
                }
            })
        },
        yCountData:function(){
            return this.options.map((item,index,arr)=>{
                if(this.type == 'marketArea'){
                    return item.nums
                }else{
                    return item.nums
                }
            })
        },
        yAgeData:function(){
            return this.options.map((item,index,arr)=>{
                if(this.type == 'marketArea'){
                    return Math.floor(item.price) / 10000
                }else{
                    return item.age
                }
            })
        },
        yCountDataMax:function(){
            let countMax = Math.max(...this.yCountData);
            return Math.ceil(countMax / 10) * 5
        },
        yAgeDataMax:function(){
            let ageMax = Math.max(...this.yAgeData);
            return Math.ceil(ageMax / 10) * 10
        },


        optionData () {
            const colors = ["#3b68ff", "#2ec75a", "#ff8f00", "#ff5454"];
            return {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        // type: "cross",
                        // crossStyle: {
                        //     color: "#999",
                        // },
                    },
                },
                toolbox: {

                },
                legend: {
                    data: [this.ytitleLeft, this.ytitleRight],
                },
                xAxis: [
                    {
                        type: "category",
                        data: this.xdata,
                        axisPointer: {
                            type: "shadow",
                        },
                        axisLabel: {
                            interval:0,
                            textStyle: {
                                fontSize:'11'
                            }
                        }
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        name: this.ytitleLeft + '(个)',
                        min: 0,
                        max: this.yCountDataMax,
                        interval: this.yCountDataMax /5,
                        axisLabel: {
                            formatter: "{value}",
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: colors[0],
                            },
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dotted',
                            
                            }
                        },
                        axisTick:{
                            show:false // 不显示坐标轴刻度线
                        },
                    },
                    {
                        type: "value",
                        name: this.ytitleRight == '中标金额' ? this.ytitleRight + '(万元)': this.ytitleRight,
                        min: 0,
                        max: this.yAgeDataMax,
                        interval: this.yAgeDataMax / 5,
                        axisLabel: {
                            formatter: "{value}",
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: colors[2],
                            },
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dotted',
                            
                            }
                        },
                        axisTick:{
                            show:false // 不显示坐标轴刻度线
                        },
                    },
                ],
                series: [
                    {
                        name: this.ytitleLeft,
                        type: "bar",
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + " 个";
                            },
                        },
                        barMaxWidth:30,
                        data:this.yCountData,
                        color:colors[0]  
                    },
                    {
                        name: this.ytitleRight,
                        type: "line",
                        // barMaxWidth:this.xdata.length == 1 ? 30 : 0,
                        tooltip: {
                            valueFormatter: (value) => value + this.yUnit
                        },
                        yAxisIndex: 1,
                        data: this.yAgeData,
                        color:colors[2]  
                    },
                ],
            };
        },

        yUnit:function(){
            return this.ytitleRight == '中标金额' ? ' 万元' :' 年';
        }
    },
    watch: {},
    methods: {
        int () { },
    },
    mounted () {
        this.int();
    },
};
</script>

<style lang="scss" scoped>
@import "@css/var.scss";
</style>
